<template>
  <!-- 商品列表 -->
  <div class="goods">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <div class="content_k1">
        <div class="content_k2">
          <el-input v-model="input" placeholder="请输入内容"></el-input
          ><el-button @click="" type="info" icon="el-icon-search"></el-button>
        </div>
        <el-button type="primary" @click="path">添加用户</el-button>
      </div>
      <!-- ====================================表格===================================== -->
      <el-table
        border
        :data="tableData"
        highlight-current-row
        @current-change="handleCurrentChange1"
        style="width: 100%"
      >
        <el-table-column type="index" width="50" label="#"></el-table-column>
        <el-table-column property="goods_name" label="商品名称" width="">
        </el-table-column>
        <el-table-column
          property="goods_price"
          label="商品价格(元)"
          width="110"
        >
        </el-table-column>
        <el-table-column property="goods_weight" label="商品重量" width="100">
        </el-table-column>
        <el-table-column property="add_time" label="创建时间" width="110">
        </el-table-column>
        <el-table-column label="操作" width="100"
          ><template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click=""
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- ====================================分页================================ -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
 
<script>
import { All } from "../../utils/API";
export default {
  name: "goods",
  data() {
    return {
      input: "",
      // 渲染的数据
      tableData: [],
      // 获取total
      total: 0,
      // 显示几条数据
      pagesize: 10,
      // 当前页
      pagenum: 1,
    };
  },
  created() {
    this.userList();
  },
  mounted() {},
  methods: {
    handleCurrentChange1(val) {
      this.currentRow = val;
    },
    handleCurrentChange(val) {
      this.pagenum = val;
      this.userList();
      console.log(`当前页: ${val}`);
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.userList();
      console.log(`每页 ${val} 条`);
    },
    //  获取用户数据
    async userList() {
      let res = await All("/goods", {}, "GET", {
        query: "",
        pagenum: this.pagenum,
        pagesize: this.pagesize,
      });
      console.log(res);
      this.tableData = res.data.data.goods;
      this.total = res.data.data.total;
    },
    //  跳转到添加路由
    path() {
       this.$router.push({path:'/home/add'})
    },
  },
};
</script>
 
<style lang = "scss" scoped>
.goods {
  width: 100%;
  height: 100%;
  background-color: #eaedf1;
  .el-breadcrumb {
    line-height: 50px;
    text-indent: 1em;
  }
  .content {
    width: 95%;
    background-color: white;
    box-sizing: border-box;
    padding: 20px;
    margin: 0 auto;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
  }
  .content_k1 {
    display: flex;
    height: 40px;
  }
  .content_k2 {
    width: 40%;
    display: flex;
    margin-right: 30px;
  }
}
</style>